<template>
    <button class="wheel-button" :class="classes" :disabled="disabled"> 
        <span v-if="loading" class="wheel-loadingIndicator"></span>
        <slot />
    </button>
</template>

<script lang="ts">

    import { computed } from 'vue';

    declare const props: {
        theme?: 'button' | 'text' | 'link';
        size?: 'normal' | 'big' | 'small';
        level?: 'main' | 'success' | 'wraning' | 'danger';
        disabled?: boolean;
        loading?: boolean;
    }

    export default {
        // inheritAttrs: false,   // 继承属性 false
        props: {
            theme: {
                type: String,
                default: 'button'
            },
            size: {
                type: String,
                default: 'normal'
            },
            level: {
                type: String,
                default: 'normal'
            },
            disabled: {
                type: Boolean,
                default: false
            },
            loading: {
                type: Boolean,
                default: false
            }
        },
        setup(props, context) {
            const { theme, size, level } = props;
            const classes = computed(() => {
                return {
                    [`wheel-theme-${theme}`]: theme,
                    [`wheel-size-${size}`]: size,
                    [`wheel-level-${level}`]: level
                };
            });

            return { classes };
        }
    }
</script>

<style lang="scss">
    $h: 32px;
    $border-color: #d9d9d9;
    $color: #333;
    $blue: #40a9ff;
    $green: #67c23a;
    $yellow: #e6a23c;
    $red: #f56c6c;
    $grey: grey;
    $radius: 4px;

    .wheel-button {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
        height: $h;
        padding: 0 12px;
        color: $color;
        border: 1px solid $border-color;
        border-radius: $radius;
        background: #FFF;
        box-shadow: 0 1px 0 fade-out(#000, .95);
        box-sizing: border-box;
        cursor: pointer;

        & + & {
            margin-left: 8px;
        }

        &:hover,
        &:focus {
            color: $blue;
            border-color: $blue;
        }

        &:focus {
            outline: none;
        }

        &::-moz-focus-inner {
            border: 0;
        }

        &.wheel-theme-button {
            &[disabled] {
                color: $grey;
                cursor: not-allowed;

                &:hover {
                    border-color: $grey;
                }
            }
        }

        &.wheel-theme-link {
            color: $blue;
            border-color: transparent;
            box-shadow: none;

            &:hover,
            &:focus {
                color: lighten($blue, 10%);
            }

            &[disabled] {
                color: $grey;
                cursor: not-allowed;
            }
        }

        &.wheel-theme-text {
            color: inherit;
            border-color: transparent;
            box-shadow: none;

            &:hover,
            &:focus {
                background: darken(#FFF, 5%);
            }

            &[disabled] {
                color: $grey;
                cursor: not-allowed;
            }
        }

        &.wheel-size-big {
            height: 48px;
            padding: 0 16px;
            font-size: 24px;
        }

        &.wheel-size-small {
            height: 24px;
            padding: 0 8px;
            font-size: 12px;
        }

        &.wheel-level-main {
            color: #FFF;
            border-color: $blue;
            background: $blue;

            &:hover,
            &:focus {
                border-color: darken($blue, 10%);
                background: darken($blue, 10%);
            }
        }

        &.wheel-level-success {
            color: #FFF;
            border-color: $green;
            background: $green;

            &:hover,
            &:focus {
                border-color: darken($green, 10%);
                background: darken($green, 10%);
            }
        }

        &.wheel-level-warning {
            color: #FFF;
            border-color: $yellow;
            background: $yellow;

            &:hover,
            &:focus {
                border-color: darken($yellow, 10%);
                background: darken($yellow, 10%);
            }
        }

        &.wheel-level-danger {
            color: #FFF;
            border-color: $red;
            background: $red;

            &:hover,
            &:focus {
                border-color: darken($red, 10%);
                background: darken($red, 10%);
            }
        }

        > .wheel-loadingIndicator {
            display: inline-block;
            width: 14px;
            height: 14px;
            margin-right: 4px;
            border-radius: 8px;
            border-width: 2px;
            border-style: solid;
            border-color: $blue $blue $blue transparent;
            animation: wheel-spin 1s infinite linear;
        }
    }

    @keyframes wheel-spin {
        0% { 
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
</style>